<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- 打包发布使用此CSS样式 -->
  <link rel="stylesheet" href="../../app.css">
  <!-- 开发时使用此样式 -->
  <link rel="stylesheet" href="../../src/assets/css/app.css">
  <link rel="stylesheet" href="./miniapp.css">
  <!-- <link rel="stylesheet" href="../../assets/css/app.css"> -->
</head>

<body>
  <div id="my-miniapp">
    <div class="header">
      <div class="headertitle">
        <img :src="information.img" alt="" v-if="information.img" />
        <div v-else class="headerimg">
          <span>{{ surname }}</span>
        </div>
      </div>
      <div class="name">{{ information.updatedUserName}}</div>
      <i class="f7-icons" @click="switchpages('/ui/set/index')">gear_alt</i>
    </div>
    <!-- 系统切换 -->
    <div class="switch">
      <div style="display: flex;margin-bottom: 10px;" @click="switchpages('/ui/terminal/index1')">
        <i class="f7-icons icons-one">arrow_right_arrow_left_circle_fill</i>
        <div class="title">
          <span>
            系统切换
          </span>
          <i class="f7-icons icons-two">chevron_right</i>
        </div>
      </div>
      <div class="system">当前<span>{{information.serverName}}</span></div>
      <div class="system">{{information.serverName}}</div>
    </div>
    <!-- 选择项目 -->
    <div class="project">
      <div style="display: flex;margin-bottom: 10px;height: 48px;" v-for="(item,index) in list" :key="index"
        @click="switchpages(item.href)">
        <i class="f7-icons icons-one">{{item.icon}}</i>
        <div class="title">
          <span>
            {{item.name}}
          </span>
          <i class="f7-icons icons-two">chevron_right</i>
        </div>
      </div>
    </div>
    <!-- 一键清理 -->
    <div class="clean-button">
      <i class="f7-icons">paintbrush</i>
      清除缓存
    </div>
  </div>

  <script>
    var miniapp = new Vue(
      {
        el: "#my-miniapp",
        data: {
          information: {},
          surname: '',
          id:'',
          list: [
            {
              icon: 'person_2_fill',
              name: '通讯录',
              href: '/ui/notice/index4'
            },
            // {
            //   icon: 'person_badge_plus',
            //   name: '实名认证',
            //   href: ''
            // },
            // {
            //   icon: 'person_crop_square',
            //   name: '人脸采集',
            //   href: ''
            // },
            // {
            //   icon: 'arrowshape_turn_up_right',
            //   name: 'APP分享',
            //   href: ''
            // },
            {
              icon: 'arrow_2_circlepath',
              name: '检查更新',
              href: '/setting/about'
            },
            {
              icon: 'power',
              name: '退出登陆',
              href: '/ui/set/index'
            }
          ],
        },
        methods: {
          switchpages(key) {
            if (window.plus) {
              if (key && key.indexOf("/") !== -1) {
                //  侧边栏
                plus.webview.close("test",'auto',0)
                // 首页关闭
                plus.webview.close(this.id)
                // 跳转本系统页面
                plus.webview.getLaunchWebview().evalJS("vue.$f7.views.current.router.navigate('" + key + "')")
              }
            }
          },
          getuser(key) {
            this.id = key
            this.information = plus.webview.currentWebview().information
            this.surname = this.information.updatedUserName.charAt(this.information.updatedUserName.length - 1)
          }
        },
      }
    )
  </script>
</body>

</html>
